<script setup>
import {HdisShow,PicCateAllList} from '@/hooks/Picker'
import { reactive, ref } from 'vue';
import { getSerActivityPost,getSerActivityedl,getSerActivityRup } from '@/api/SerActivity';
import ZXSimg from '@/components/ZXSimg/index.vue'
import SwyQuill from '@/components/ZXSimg/SwyQuill'
const  cateList=PicCateAllList()
const changeInput = (val)=>{
  queryData.content = val
}
const QueryData={
  community_code:'',  // 小区
  title:'', //活动主题
  place:'', //活动地点
  sponsor_unit:'', //举办单位
  begin_time:'',//开始时间
  end_time:'',//结束时间
  status:1,//活动状态
  content:'',//文本
  photo:'',
  id:null
}
const queryData=reactive({...QueryData})
const rulesform={
  community_code:[{required: true, message: "请选择", trigger: "blur" }],
  title:[{ required: true, message: "请选择", trigger: "blur" }],
  place:[{ required: true, message: "请选择", trigger: "blur" }], 
  sponsor_unit:[{ required: true, message: "请选择", trigger: "blur" }], 
  begin_time:[{ required: true, message: "请选择", trigger: "blur" }],
  end_time:[{ required: true, message: "请选择", trigger: "blur" }],
}
const formRef=ref()

// 清空表单
const ResEt=async()=>{
  
  formRef.value.resetFields()
  Object.assign(queryData, { ...QueryData })
 
}
const replyData=async (id)=>{
  let {data}=await getSerActivityRup(id)
 
  Object.assign(queryData,data)
  HdisShow.value=true
}
const emit=defineEmits(['updateList'])
const onSearCh=async ()=>{
  try {
  //  console.log(111)
  await formRef.value.validate()
 
  // const data=toRaw(queryData)
 
   queryData.id?await getSerActivityedl(queryData):await getSerActivityPost(queryData)
 
HdisShow.value=false
  emit('updateList')
 } catch (error) {
  
 }
}
defineExpose({
  replyData,
})
</script>
<template>
  <div>
    <el-drawer v-model="HdisShow" :title="queryData.id?'修改活动':'新增活动'" size="51%" style="position: relative;" @close="ResEt">
      <el-form ref="formRef" :model="queryData" :inline="true" class="demo-form-inline" label-position="top" :rules="rulesform">
        
    <el-form-item label="小区名称" prop="community_code" >
    <el-select  placeholder="请输入" v-model="queryData.community_code" clearable style="width: 325px;">
      <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.code"></el-option>
    </el-select>
  </el-form-item>
    <el-form-item label="活动主题" prop="title" >
    <el-input style="width: 325px;"  placeholder="请输入" clearable v-model="queryData.title"></el-input>
  </el-form-item>
  <el-form-item label="活动地点" prop="place" >
    <el-input style="width: 325px;"  placeholder="请输入" clearable v-model="queryData.place"></el-input>
  </el-form-item>
  <el-form-item label="举办单位" prop="sponsor_unit" >
    <el-input style="width: 325px;"  placeholder="请输入" clearable v-model="queryData.sponsor_unit"></el-input>
  </el-form-item>
  <el-form-item label="活动开始时间" prop="begin_time" >
    <el-date-picker
        v-model="queryData.begin_time"
        type="datetime"
        placeholder="请输入"
        style="width: 325px;"
        value-format="x"
        
      />
  </el-form-item>
  <el-form-item label="活动结束时间" prop="end_time" >
    <el-date-picker
        v-model="queryData.end_time"
        type="datetime"
        placeholder="请输入"
        style="width: 325px;"
        value-format="x"
      />
  </el-form-item>
<el-form-item label="活动状态">
  <el-radio-group v-model="queryData.status" class="ml-4" style="width: 325px;">
      <el-radio :label="1" size="large">有效</el-radio>
      <el-radio :label="0" size="large">无效</el-radio>
    </el-radio-group>
</el-form-item>
<el-form-item label="图片" prop="photo">
  <ZXSimg v-model="queryData.photo" :type="'activity'"></ZXSimg>
</el-form-item>
<el-form-item label="活动内容">
  <SwyQuill :value="queryData.content" :min-height="192" @update:input="changeInput" :min-width="650"></SwyQuill>
</el-form-item>
    <el-form-item style="padding-top: 21px;">
  
  </el-form-item>
        </el-form>
        <span style="position: absolute; right:  30px; bottom: 30px;">
          <el-button @click="HdisShow=false">取消</el-button>
        <el-button type="primary" @click="onSearCh">确定</el-button>
        </span>
  </el-drawer>
    
  </div>
</template>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
 
 display: block !important;
}
</style>